<template>
	<view class="body" >
		
		<form  >
			
			<view class="form-item" >
				<label class="form-label">邮箱</label>
				<input v-model="form.mail" placeholder="请输入邮箱" placeholder-style="color:#ccc" />
			</view>
			<view class="form-item" >
			
				<label class="form-label">手机号</label>
				<input v-model="form.store_principal_phone" maxlength="11" placeholder="请输入手机号" placeholder-style="color:#ccc" />
			</view>
			
			<!-- <view class="form-item" >
			
				<label class="form-label">验证码</label>
				<input v-model="form.phone" placeholder="请输入验证码" placeholder-style="color:#ccc" />
				<view class="yzmBtn" >获取验证码</view>
			</view> -->
			
			<view class="form-item" >
				<label class="form-label">企业名称</label>
				<input v-model="form.company" placeholder="请输入企业名称" placeholder-style="color:#ccc" />
			</view>
			<view class="form-item" >
				<label class="form-label">运营者姓名</label>
				<input v-model="form.store_principal" placeholder="请输入运营者姓名" placeholder-style="color:#ccc" />
			</view>
			<view class="form-item" >
				<label class="form-label">身份证号码</label>
				<input v-model="form.store_idcard" maxlength="18" placeholder="请输入运营者身份证号码" placeholder-style="color:#ccc" />
			</view>
			
			<view class="form-item" >
				<label class="form-label">店铺名称</label>
				<input v-model="form.store_name" type="text" placeholder="请输入店铺名称" placeholder-style="color:#ccc" />
			</view>
			
			<view class="form-item" >
				<label class="form-label">店铺类型</label>
				<u-input v-model="form.store_type" placeholder="请选择" disabled @click="storeShow = true"></u-input>
			</view>
			
			<view class="form-item" >
				<label class="form-label">店铺地址</label>
				<u-input v-model="address" placeholder="请选择" disabled @click="selectAddress" ></u-input>
			</view>
			
			<view class="form-item"  >
				<label class="form-label">详情地址</label>
				<u-input v-model="detail" placeholder="请输入详情地址" placeholder-style="color:#ccc" />
			</view>
			
			<view class="form-item" >
				<label class="form-label">是否是广告店铺</label>
				<u-input v-model="adValue" placeholder="请选择" disabled @click="showAd = true" ></u-input>
			</view>
			
			<view class="form-item" v-if="form.is_advertising_store === 2" >
				<label class="form-label">补贴类型</label>
				<u-input v-model="typeValue" placeholder="请选择" disabled @click="showType = true" ></u-input>
			</view>
			
			<view class="form-item" v-if="form.is_advertising_store === 2" >
				<label class="form-label">补贴点数</label>
				<u-input v-model="form.subsidy_point" placeholder="请输入补贴点数" placeholder-style="color:#ccc" />
			</view>
			
			<view class="form-column" >
				<view>上传运营者身份证和营业执照</view> 
				<view class="form-item-row" >
					<view @click="afterRead('store_idcard_img_front')" class="row" >
						<image :src=" form.store_idcard_img_front ? form.store_idcard_img_front : require('../../static/300b8b60-140f-11eb-a927-03fedf1933ca.png') " mode="aspectFit" ></image>
						<text>身份证正面</text>
					</view>
					
					<view @click="afterRead('store_idcard_img_reverse')" class="row" >
						<image :src=" form.store_idcard_img_reverse ? form.store_idcard_img_reverse : require('../../static/300c0090-140f-11eb-a927-03fedf1933ca.png') " mode="aspectFit" ></image>
						<text>身份证反面</text>
					</view>
					
					<view @click="afterRead('store_hand_idcard_img')" class="row" >
						<image :src=" form.store_hand_idcard_img ? form.store_hand_idcard_img : require('../../static/300c9cd0-140f-11eb-a927-03fedf1933ca.png')" mode="aspectFit" ></image>
						<text>手持身份证</text>
					</view>
					
					<view @click="afterRead('store_business_img')" class="row" >
						<image :src="form.store_business_img ? form.store_business_img : require('../../static/300d1200-140f-11eb-a927-03fedf1933ca.png')" mode="aspectFit" ></image>
						<text>营业执照</text>
					</view>
					
					<view @click="afterRead('store_log')" class="row">
						<image mode="aspectFit" :src="form.store_log ? form.store_log : require('../../static/300c4eb0-140f-11eb-a927-03fedf1933ca.png')"></image>
						<text>店铺图标</text>
					</view>
					
				</view>
			</view>
				
			<view class="submit-view">
				<button class="submitBtn" form-type="submit" @click="submitAction" >立即提交</button>
			</view>
		</form>
		 
		 <u-picker v-model="showAd" mode="selector" :range="selectorObj" range-key="label" @confirm="confirmAd" ></u-picker>
		 <u-picker v-model="showType" mode="selector" :range="selectorType" range-key="label" @confirm="confirmType" ></u-picker>
		 <u-picker v-model="storeShow" mode="selector" :range="leftTit" range-key="store_cats" @confirm="confirmStore" ></u-picker>
		 
	</view>
</template>

	
<script>
	
	import {pathToBase64} from '@/common/image.js'
	 
	export default{
		data(){
			return{
				leftTit:[],
				showAd: false   ,//是否显示广告
				showType: false,	//是否显示补贴类型
				storeShow: false,	//是否显示补贴类型
				selectorObj: [
					{
						label: '是',
						value: 1
					},
					{
						label: '否',
						value: 2
					}
				],
				selectorType: [
					{
						label: '百分比',
						value: 'per'
					},
					{
						label: '固定比',
						value: 'fix'
					}
				],
				form: {
					store_name: ''   ,			  //店铺名
					store_principal_phone: ''    ,//店主手机号
					store_principal: ''			  ,//店主名字
					store_type: ''					,//店铺类型，暂时手输
					store_hand_idcard_img: ''		,//店主手持身份证照片
					store_business_img: ''			,//营业许可证照片
					store_idcard_img_front: ''		 ,//店主身份证正面
					store_idcard_img_reverse: ''      ,//店主身份证反面
					store_idcard: ''				   ,//店主身份证
					store_desc: ''						,//店铺备注
					store_log: ''						 ,//店铺图标图片
					mail: ''   ,						  //邮箱号
					company: ''							  ,//企业名称
					long: ''							   ,//经度
					lat: ''									,//纬度
					subsidy_type: ''						 ,//补贴类型 per百分比	fix固定值
					subsidy_point: ''						,//补贴点数
					is_advertising_store: '' 				,//是否是广告店铺 1是 2否
					address: ''								//地址
				},
				typeValue: ''   ,//补贴类型
				adValue: ''		,//是否是广告店铺
				address: ''		 ,//地址
				detail: ''			//详情地址
			}
			
			// 邮箱	mail			// 企业名称	company			// 经度	long			// 纬度	lat			// 补贴类型	subsidy_type	per百分比	fix固定值
		},
		onLoad() {
			this.getCatName();
		},
		methods:{
			getCatName(){
				this.$https.Classification.storeType().then(req => {
					this.leftTit = req;
				})
			},
			afterRead(name) {
				uni.chooseImage({
				    count: 1,
				    success: async e=>{
						const path = await pathToBase64(e.tempFiles[0].path);
						this.getImg(name,path);
					},
				});
				
				// uni.chooseImage({
				// 	count: 1,
				// 	success(e) {
				// 		console.log('选择图片后',e)
				// 		const path = pathToBase64(e.tempFiles[0].path);
				// 		this.getImg(name,path);
				// 	}
				// })
			},
			getImg(name,path){
				this.form[name] = path;
			},
			
			selectAddress(){
				const self = this
				uni.chooseLocation({
				    success: function (res) {
						console.log('res',res)
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						self.address = res.address
						self.form.lat = res.latitude
						self.form.long = res.longitude
						self.form.address = res.address
				    }
				});
			},
			
			confirmAd(e){  //确认是否是广告店铺
				console.log('e',e)
				const index = e[0]
				this.form.is_advertising_store = this.selectorObj[index].value
				this.adValue = this.selectorObj[index].label
			},
			confirmType(e){  //是否显示type
				const index = e[0]
				this.typeValue = this.selectorType[index].label
				this.form.subsidy_type = this.selectorType[index].value
			},
			confirmStore(e){
				this.form.store_type = this.leftTit[e[0]].store_cats;
				console.log(e)
			},
			submitAction(){  //提交订单
			
				if(this.detail){
					this.form.address += this.detail
				}
				console.log('提交的内容是什么呢',this.form)
				this.$https.Classification.applyStore(this.form).then(req => {
					console.log('申请成共了')
					uni.navigateBack()
				})
			},
		}
	}
</script>

<style lang="scss" scoped >
	
	page,.body{
		
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	
	form{
		width: 100%;
	}
	
	.form-item{
		
		display: flex;
		align-items: center;
		
		padding: 20rpx;
		
		width: 100%;
		border-bottom: 1rpx solid rgb(246,246,246);
		
		font-size: $uni-font-size-base;
		
		.form-label{
			
			width: 30%;
			font-size: $uni-font-size-base;
		}
		
		.yzmBtn{
			
			padding: 6rpx;
			
			border-radius: 10rpx;
			font-size: $uni-font-size-base;
			color: $uni-color-error;
			border: 1rpx solid $uni-color-error;
		}
	}
	
	.form-column{
		padding: 20rpx;
		
		.form-item-row{
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			flex-wrap: wrap;
			
			text-align: center;
			
			.row{
				padding: 24rpx 0;
				
				width: 50%;
				height: 240rpx;
				
				image{
					
					width: 100%;
					height: 90%;
				}
				
				text{
					
					font-size: $uni-font-size-base;
					color: #CCCCCC;
				}
			}
			
			.input-placeholder{
				color: #303133;
			}
		}
	}
	u-input{
		flex: 1;
		width: 100%;
	}
	
	.submit-view{
		
		margin: 40rpx;
		
		.submitBtn{
			
			margin:  0 30rpx;
			
			background-color: $uni-color-error;
			font-size: $uni-font-size-base;
			color: #FFFFFF;
		}
	}
	
	button::after{
		border: none;
	}
	
</style>
